<template>
	<view class="content">
		<view class="header">
			<view class="block-item">
				<view class="block-title">
					<text>基本信息</text>
				</view>
				<view class="block-content">
					<text>{{userInfo.username}}</text>
					<text>{{userInfo.phone}}</text>
				</view>
			</view>
			<view class="block-item">
				<view class="block-title">
					<text>职业动机评测结果</text>
				</view>
				<view class="block-content">
					<view class="result-item" :style="{'background-color':colors[index]}" v-for="(item,index) in list" :key="index">
						<text>{{item.title}}</text>
						<text>{{parseInt(item.normdistValue * 100) + '%'}}</text>
					</view>
				</view>
			</view>
			<view style="background-color: #fff;height: 10px;"></view>
		</view>
		<view class="warp">
			<view style="font-size: 12px;">
				<text style="font-weight: bold;">职业评测包含以下纬度：</text>
				<view v-for="(item,index) in list" :key="index">
					<text style="font-weight: bold;">{{item.title + "："}}</text>
					<text>{{item.simpleOption}}</text>
				</view>
			</view>
			<view style="height:240px;width: 100%;" id="canvasRadar">
			</view>
			<view style="display: flex;flex-direction: column;font-size: 10px;">
				<text style="font-weight: bold;">注解：</text>
				<text>1.上图展现了测评对象在每个职业驱动力的维度上的百分站位。</text>
				<text>2.每个百分站位的范围是1%－99%，这反映了测评对象的结果在全体职业动机受测者结果中的位置。例如，39%表示在该维度上，测评对象的得分比数据库中39%的受测者的得分高。98%意味着测评对象该维度上的得分比98%的受测者都要高。百分站位越高，测评对象在该维度上的驱动因素强度越大。</text>
				<text>3.该百分站位结果基于将测评对象结果和数据库中的结果对比得出，该数据库目前包括308277名中国员工。</text>
			</view>
			<view class="block-item">
				<view class="block-title">
					<text>职业动机解析</text>
				</view>
				<view class="block-content">
					<view class="analysis-item" :style="{'background-color':colors[index]}" v-for="(item,index) in list" :key="index">
						<text style="font-size: 14px;font-weight: bold;">{{item.title}}</text>
						<text v-html="item.dimensionAnalysis.replace(/\n/g,'<br/>').replace(new RegExp(item.dimension,'g'),item.title)"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	// import uCharts from '../static/u-charts.js';
	var eCharts = require("../static/echarts.min.js");
	var _self;
	var canvasObj = {};
	export default {
		data() {
			return {
				userInfo: {},
				list: [],
				colors: ["#00FFFF", "#FFFF99", "#CCFFCC", "#CC99FF", "#FFCC99", "#99CCFF"],
			}
		},
		onLoad() {
			_self = this;
			this.userInfo = uni.getStorageSync("userInfo");
			this.getAnalysisReport();
		},
		onReady() {

		},
		computed: {
			...mapState(['BASE_URL']),
		},
		methods: {
			getAnalysisReport() {
				let self = this;
				uni.showLoading({
					title: '请稍等...',
					mask: true
				})
				// 查看报告
				uni.request({
					url: this.BASE_URL + 'WikiCareerAssessment/getAnalysisReport',
					method: 'POST',
					data: {
						'phone': this.userInfo.phone
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
					},
					success(res) {
						uni.hideLoading();
						if (res.data.code == 200) {
							self.list = res.data.data.analysisReport;
							self.$nextTick(function() {
								self.showRadar('canvasRadar');
							})

						} else {
							let error_msg = res.data.msg ? res.data.msg : '程序错误，请重试';
							uni.showToast({
								icon: 'none',
								title: error_msg
							})
						}
					},
					fail() {
						uni.hideLoading();
					}
				})
			},

			showRadar(canvasId) {
				let self = this;
				let oData = {
					indicator: [],
					value: []
				};

				for (let i = 0; i < self.list.length; i++) {
					oData.indicator.push({
						name: self.list[i].title,
						max: 100
					});
					oData.value.push(parseInt(self.list[i].normdistValue * 100));
				}
				let tempNameOne,tempValueOne = {};
				tempNameOne = oData.indicator[1];
				tempValueOne = oData.value[1];
				oData.indicator[1] = oData.indicator[self.list.length-1];
				oData.value[1] = oData.value[self.list.length-1];
				oData.indicator[self.list.length-1] = tempNameOne;
				oData.value[self.list.length-1] = tempValueOne;
				
				let tempNameTwo,tempValueTwo = {};
				tempNameTwo = oData.indicator[2];
				tempValueTwo = oData.value[2];
				oData.indicator[2] = oData.indicator[self.list.length-2];
				oData.value[2] = oData.value[self.list.length-2];
				oData.indicator[self.list.length-2] = tempNameTwo;
				oData.value[self.list.length-2] = tempValueTwo;
				
				let cWidth = document.documentElement.clientWidth;
				let center = ["50%","50%"];
				let radius = 80;
				if(cWidth < 400){
					center = ["54%","50%"];
				}
				if(cWidth <= 360){
					center = ["58%","50%"];
				}
				if(cWidth <= 320){
					radius = 65;
				}
				let charts = eCharts.init(document.getElementById("canvasRadar"));
				let option = {
					tooltip: {},
					radar: {
						name: {
							textStyle: {
								color: '#000',
							}
						},
						indicator: oData.indicator,
						center: center, //调整雷达图的位置
						radius: radius, //半径，可放大放小雷达图
					},
					series: [{
						type: 'radar',
						data: [{
							value: oData.value,
							color: "#ffff",
							//这里的配置显示数值
							itemStyle: {
								normal: {
									color: '#59169c',
									lineStyle: {
										width: 0,
										color: 'rgba(255,74,74,.3)',
									},
								},
							},
							areaStyle: {
								opacity: 0.9,
								color: new eCharts.graphic.RadialGradient(0.5, 0.5, 1, [{
										color: '#B8D3E4',
										offset: 0
									},
									{
										color: '#72ACD1',
										offset: 1
									}
								])
							}
						}]
					}]
				}
				charts.setOption(option)
			},
		}
	}
</script>
<style>
	.content {
		height: 100%;
		box-sizing: border-box;
		padding: 10px;
		background-color: rgba(255, 255, 255, 0.8);
	}

	.header {
		position: fixed;
		box-sizing: border-box;
		left: 0;
		top: 0;
		width: 100%;
		padding: 10px 10px 0 10px;
		background-color: #FFFFFF;
	}

	.block-item {
		box-sizing: border-box;
		font-size: 16px;
		padding-top: 5px;
	}

	.block-title {
		border-left: 3px solid #0089ff;
		width: 100%;
		font-size: 16px;
		box-sizing: border-box;
		padding-left: 10px;
		height: 30px;
		line-height: 30px;
		padding-left: 10px;
		background-color: #E5E5E5;
	}

	.block-content {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		padding-top: 5px;
	}

	.result-item {
		display: flex;
		justify-content: space-between;
		width: 330rpx;
		font-size: 12px;
		font-weight: bold;
		padding: 3px 3px;
	}

	.analysis-item {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		width: 100%;
		font-size: 12px;
		padding: 3px 3px;
	}

	.analysis-item /deep/ em {
		font-weight: bold;
	}

	.warp {
		margin-top: 180px;
		box-sizing: border-box;
		padding-top: 5px;
		height: calc(100% - 180px);
		overflow-y: auto;
		overflow-x: hidden;
	}

	.charts {
		width: 850px;
		height: 500rpx;
		position: absolute;
		left: -30rpx;
	}
</style>
